<template>
	<view class="">
		<view class="head">
			<view class="tabs p-3 flex justify-between">
				<view v-for="(item, tabIdx) of tabs" :key="tabIdx" class="tab_item font_24 text-white" :class="{ active: current == tabIdx }" @click="tabChange(tabIdx)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="">
			<view v-if="list.length <= 0" class="p-2 mt-3" style="margin: 100rpx auto;">
				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无名片信息"></u-empty>
			</view>
			<view v-else class="mt-3 pb-2">
				<!-- <card-list :circle-data="list" :ask="ask" :askbtn-show="askbtnShow" :is-delete="false" :btn-show="current == 2 ? 2 : 4" @submit="submit"></card-list> -->
				<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
			</view>
		</view>
	</view>
</template>

<script>
import { exchangeRequestList, xchangeHandle } from '@/api/my/card.js';
// import cardList from '@/components/card_list.vue';
export default {
	// components: { cardList },
	data() {
		return {
			tabs: ['新的请求', '已同意', '已拒绝'],
			current: 0,
			list: [],
			page: 1,
			status: 'loadmore',
			suo: true,
			askbtnShow: true, //拒绝同意按钮是否显示
			ask: true
		};
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getInfo();
			}, 1000);
		}
	},
	onLoad() {
		this.getInfo();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		tabChange(idx) {
			this.current = idx;
			this.list = [];
			this.page = 1;
			this.getInfo();
			if (idx == 1 || idx == 2) {
				this.askbtnShow = false;
			} else {
				this.askbtnShow = true;
			}
			this.ask = idx == 1 ? false : true;
		},
		getInfo() {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				page: this.page,
				status: this.current //状态 0:申请中，1：同意，2：拒绝
			};
			exchangeRequestList(msg)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.list.push(...res.data.data);
						if (res.data.data.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.data.data.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取交换名片列表失败', err);
				});
		},
		// 审核处理
		submit(val) {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				status: val.num,
				id: val.id,
				apply_card_id: val.card_id || ''
			};
			xchangeHandle(msg)
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.list = [];
						this.page = 1;
						this.getInfo();
					}
					uni.$u.toast(res.msg);
				})
				.catch(err => {
					console.log('操作失败', err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.head {
	padding: 0 100rpx;
	.tabs {
		margin: auto;
		.tab_item {
			// padding: 0 10rpx;
			width: 150rpx;
			height: 44rpx;
			background-color: #d3d3d3;
			border-radius: 14rpx;
			text-align: center;
		}
		.active {
			background: linear-gradient(35deg, #cf1526, #d73342);
			box-shadow: 0px 0px 4px 0px rgba(195, 195, 195, 0.5);
			border-radius: 14rpx;
		}
	}
}
::v-deep .u-popup__content {
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2 !important;
}
</style>
